import { Text, View, StyleSheet, Button, FlatList, ImageBackground } from "react-native"
import { Entypo } from "@expo/vector-icons";
import { useState, useEffect } from "react";
import { useAuth } from "../context/AuthProvider";

const DepositRefund = () => {
    const {user} = useAuth()
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);

    const onBtn = (shopId) => {
        fetch('http://10.7.89.174:3000/qiandelCash',
            {
                method: 'POST',
                body: JSON.stringify({
                    shopId: shopId,
                    userName:user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                if (res.code == 200) {
                    alert("退还成功");
                    setList(res.List)
                } else {
                    setList([...list, ...res.data.content])
                    ToastAndroid.show("退还失败", ToastAndroid.SHORT);
                }
            })
    }

    useEffect(() => {
        fetch('http://10.7.89.174:3000/DepositRefund',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName:user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                // console.log(res)
                if (page == 1) {
                    setList(res.List)
                    console.log(list)
                }
                else {
                    setList([...list, ...res.List])
                }
            })
    }, [])
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }

    const renderItem = ({ item }) => (
        <View style={styles.djx1}>
            <Text style={{ marginLeft: "28%", marginTop: 20, fontSize: 23, marginBottom: 10 }}>
                退还 {item.shopText} 的押金
            </Text>
            <Text style={{ fontSize: 20, marginLeft: "10%", lineHeight: 35 }}>出租人：{item.shopName}</Text>
            <Text style={{ fontSize: 20, marginLeft: "10%", lineHeight: 35 }}>租赁人：{item.userName}</Text>
            <Text style={{ fontSize: 20, marginLeft: "10%", lineHeight: 35 }}>总押金：{item.shopDeposit}</Text>
            <Text style={{ fontSize: 20, marginLeft: "10%", lineHeight: 35 }}>逾期押金：{item.overdueDeposit}</Text>
            <View style={{ width: "60%", marginLeft: "20%", marginTop: 20 }}>
                <Button
                    title="确认退还"
                    onPress={() => onBtn(item.shopId)}
                />
            </View>
        </View>
    )

    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <FlatList
                    ListEmptyComponent={<Text>暂无数据</Text>}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={list}
                    renderItem={renderItem}
                    onEndReached={onEnd}
                    keyExtractor={item => item.id}
                />
            </ImageBackground>
        </View>
    )
}

const styles = StyleSheet.create({
    djx1: {
        width: "90%",
        height: 300,
        backgroundColor: "white",
        marginLeft: "5%",
        borderRadius: 23,
        borderColor: "lightgrey",
        borderWidth: 1,
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },
});

export default DepositRefund